<template>
  <ga-link size="mini" @click="handleClick" class="text" :hoverable="false">{{
    record.serviceName || "-"
  }}</ga-link>
  <ga-drawer
    :width="600"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :hide-cancel="true"
    unmountOnClose
  >
    <template #title> {{ record.serviceName || "-" }} </template>
    <div>
      <BorderBox class="m_b_16">
        <template v-slot:title_l>详情</template>
        <template v-slot:main_info>
          <div class="flex">
            <div class="info_box flex">
              <div class="left">
                <p>类型:</p>
                <p>端点数:</p>
                <p>命名空间:</p>
              </div>
              <div class="right">
                <p>{{ detailData?.type }}</p>
                <p>{{ detailData?.endpointCount }}</p>
                <p>{{ detailData?.tenant }}</p>
              </div>
            </div>
            <div class="info_box flex">
              <div class="left">
                <p>关联Pod数:</p>
                <p>所属集群:</p>
                <p>运行时间:</p>
              </div>
              <div class="right">
                <p>{{ detailData?.podCount }}</p>
                <p>{{ record?.masterIp }}</p>
                <p>{{ MsToDays(detailData?.runningTime) }}</p>
              </div>
            </div>
          </div>
        </template>
      </BorderBox>
    </div>
  </ga-drawer>
</template>

<script setup>
import { defineProps, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import { getK8sDetail } from "@/api/k8s.js";
import { MsToDays } from "@/utils/day.js";

const props = defineProps({
  record: {
    required: true,
    default: "-",
  },
});
const { record } = toRefs(props);
const visible = ref(false);
const detailQuery = ref({
  masterIp: "",
  namespace: "",
  serviceName: "",
  from: "2024-09-05 09:55:16",
  to: "2024-09-05 10:55:16",
});
const detailData = ref();

//k8s侧弹框
const handleClick = async () => {
  // console.log("record", record.value);
  detailQuery.value.masterIp = record.value.masterIp;
  detailQuery.value.namespace = record.value.namespace;
  detailQuery.value.serviceName = record.value.serviceName;
  visible.value = true;
  const { data, code } = await getK8sDetail(detailQuery.value);
  if (code === 20000) {
    detailData.value = data;
  }
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
</script>

<style lang="scss" scoped>
:deep(.garco-link) {
  padding: 0;
}

.text {
  border-radius: 0;
}

.text:hover {
  border-bottom: 1px solid #0f5ef7;
}

.info_box {
  width: 100%;
}

.left {
  width: 50%;
  p {
    color: rgb(44, 64, 104, 0.6);
    padding-bottom: 10px;
    font-size: 14px;
    text-align: right;
    padding-right: 40px;
    width: 150px;
  }
}
.right {
  width: 50%;
  p {
    color: #011948;
    font-size: 14px;
    padding-bottom: 10px;
  }
}
</style>
